<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="./css/bar.css">
  <link rel="stylesheet" href="/static/css/layui.css"  media="all">
  <script src="/static/jquery-1.8.0.min.js"></script>
  <title>首页</title>
</head>
<body>
 

<div>
<ul class="layui-nav">
  <li class="layui-nav-item layui-this">
    <a href="index.html">全体账单</a>
  </li>
  <li class="layui-nav-item layui-this"><a href="personalreceivablebills.html?name=dhq">海权</a></li>
  <li class="layui-nav-item layui-this"><a href="personalreceivablebills.html?name=toshi">toshi</a></li>
  <li class="layui-nav-item layui-this"><a href="personalreceivablebills.html?name=lgh">贵豪</a></li>
</ul>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>


<script src="js/tool.js" charset="utf-8"></script>

<script src="/static/layui.js" charset="utf-8"></script>
<script>
  var data = null;
  $.ajax({
    type: 'get'
    ,url: "/bills"
    ,contentType: "application/x-www-form-urlencoded"
    ,dataType: 'json'
    ,async: false
    ,success: function(res){
      data = res;
      console.log(data)
      for (var i = 0; i < data.length; i++) {
        var proportion = 0;
        for(var j=0; j<3; j++){
          proportion += data[i].participants[j].proportion;
        }
        for(var j=0; j<3;j++){
          data[i][data[i].participants[j].username] = (data[i].participants[j].proportion / proportion * data[i].amount).toFixed(2);    
          data[i][data[i].participants[j].username+"Paid"] = data[i].participants[j].paid;
        }
        data[i]['paid'] = data[i].participants[0].paid && data[i].participants[1].paid && data[i].participants[2].paid;
        data[i].payTime =timestampToTime(data[i].payTime);
      }
    }
  });
  layui.use('element', function(){
    var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
    
    //监听导航点击
    element.on('nav(demo)', function(elem){
      layer.msg(elem.text());
    });
  });
  layui.use('table', function(){
    var table = layui.table;
    table.render({
      elem: '#test'
      ,title: '用户数据表'
      ,cols: [[
        {field:'message', title:'账单', width:120, edit: 'text', rowspan:"2", align:'center'}
        ,{field:'drawee', title:'付款人', width:100, rowspan:"2", align:'center'}
        ,{field:'payTime', title:'付款时间', width:140,sort:true, rowspan:"2", align:'center'}
        ,{field:'amount', title:'金额', width:100, rowspan:"2", align:'center'}
        ,{toolbar: '#paymen', title:'分摊', width:100, align:'center', colspan:"3"}  
        ,{field:'paid', title:'是否结清', width:150, rowspan:"2", align:'center', templet: function(res){
          if(res.paid == true) return '<span>结清</span>';
          else return '<span style="color: #f01">未结清</span>' ;
        }}
      ], [
    {title: '贵豪', align:'center', width: 80,templet:function(res){
        if(!res.lghPaid){
          return '<span style="color: #f01">'+res.lgh+'</span>';
        }
        else
        {
          return '<span>'+res.lgh+'</span>';
        }
    }}
    ,{field:'dhq',  title: '海权', align:'center', width: 80,templet:function(res){
        if(!res.dhqPaid){
          return '<span style="color: #f01">'+res.dhq+'</span>';
        }
        else
        {
          return '<span>'+res.dhq+'</span>';
        }
    }}
    ,{field:'toshi',  title: 'toshi', align:'center', width: 80,templet:function(res){
        if(!res.toshiPaid){
          return '<span style="color: #f01">'+res.toshi+'</span>';
        }
        else
        {
          return '<span>'+res.toshi+'</span>';
        }
    }}
  ]]
      ,page: true
      ,data: data
      ,success(data){
        console.log(data)
      }
    });
    
  });
</script>

</body>
</html>